<template>
  <el-row>
    <el-col :span="12">
      <el-card class="el-card">
        <div class="header">
          <p>线路管理</p>
        </div>
        <div id="map" ref="mapEcharts">
          <!-- 地图 -->
        </div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card class="el-card">
        <div class="header">
          <p>运输任务</p>
          <div class="more">查看更多<i class="el-icon-arrow-right" /></div>
        </div>
        <el-table
          ref="table"
          :data="tableData"
          stripe
          style="width: 100%"
          @cell-mouse-enter="stop"
          @cell-mouse-leave="start"
        >
          <el-table-column
            prop="id"
            label="任务编号"
            width="180"
          />
          <el-table-column
            prop="startAgency"
            label="起始地"
            width="180"
          />
          <el-table-column
            prop="endAgency"
            label="目的地"
          />
          <el-table-column
            prop="licensePlate"
            label="车辆"
          />
          <el-table-column
            prop="licensePlate"
            label="车辆"
          >
            <template v-slot="{row}">
              <span v-if="row.status==2">进行中</span>
              <span v-if="row.status==1">已完成</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from 'echarts'
import '@/assets/assets/china'
import { lineManageStatic, geoCoordMapStatic, lineManageRegions } from './static'
// import { managerPage } from '@/api/user'
export default {
  props: {
    transporttasklist: {
      type: [Array],
      default: function() { return [] }
    }
  },
  data() {
    return {
      geoCoordMap: geoCoordMapStatic,
      tableData: [{ endAgency: '', id: '', licensePlate: '', startAgency: '', status: '' }],
      timer: null
    }
  },
  watch: {
    transporttasklist: {
      deep: true,
      handler() {
        this.tableData = this.transporttasklist
        // console.log(this.tableData)
      }
    }
  },
  async created() {
    // const res = await managerPage()//接口错误
    // console.log(res)
  },
  mounted() {
    this.map = echarts.init(this.$refs.mapEcharts)

    const table = this.$refs.table
    const divData = table.bodyWrapper
    console.log(divData)
    this.timer = setInterval(() => {
      divData.scrollTop += 1
      // console.log(divData.scrollTop)
      if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
        divData.scrollTop = 0
      }
    }, 100)
    this.initial()
  },
  methods: {
    stop() {
      clearInterval(this.timer)
    },
    start() {
      const table = this.$refs.table
      const divData = table.bodyWrapper
      // console.log(divData)
      this.timer = setInterval(() => {
        divData.scrollTop += 1
        // console.log(divData.scrollTop)
        if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
          divData.scrollTop = 0
        }
      }, 100)
    },
    // 处理线路地图图表数据
    convertData(data) {
      const res = []
      for (let i = 0; i < data.length; i++) {
        const geoCoord = this.geoCoordMap[data[i].toName]
        const geoCoords = this.geoCoordMap[data[i].fromName]

        if (geoCoord) {
          res.push({
            name: data[i].toName,
            value: geoCoord.concat(data[i].value)
          })
        }
        if (geoCoords) {
          res.push({
            name: data[i].fromName,
            value: geoCoords.concat(data[i].value)
          })
        }
      }
      return res
    },
    initial() {
      const data = lineManageStatic
      const series = [
        {
          name: data[0].fromName + ' Top3',
          type: 'lines',
          zlevel: 1,
          effect: {
            show: true,
            period: 6,
            trailLength: 0,
            // arrow箭头的颜色
            color: '#E15536',
            symbolSize: 10,
            symbol: 'arrow'
          },
          lineStyle: {
            normal: {
              color: '#E15536',
              width: 3,
              curveness: 0.2,
              type: 'dashed'
            }
          },
          data: data.map((dataItem) => {
            return {
              fromName: dataItem.fromName,
              toName: dataItem.toName,
              coords: [
                this.geoCoordMap[dataItem.fromName],
                this.geoCoordMap[dataItem.toName]
              ],
              name: dataItem.name
            }
          })
        },
        {
          cursor: 'auto',
          name: data[0].fromName + ' Top3',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}',
              color: '#333333'
            }
          },
          // 图标上的点的大小
          symbolSize: (val) => {
            return val[2] / 10
          },
          itemStyle: {
            normal: {
              // color: 'rgba(227,74,64,0.6)'
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: '#E15536' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#E15536' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            emphasis: {
              itemStyle: {
                color: 'red'
              }
              // areaColor: '#5389f0'
            }
          },
          data: this.convertData(data)
        }
      ]

      this.map.setOption({
        tooltip: {
          position: (point) => {
            return ['0%', '35%']
          },
          borderColor: '#EBEEF5',
          borderWidth: 1,
          padding: [15, 18, 15, 18],
          trigger: 'item',
          backgroundColor: 'rgba(255,255,255,0.96)',
          formatter: (params, ticket, callback) => {
            const {
              name: {
                lineNumber,
                lineName,
                lineType,
                fromAgency,
                toAgency,
                distance,
                cost,
                time
              }
            } = params.data
            if (params.seriesType === 'effectScatter') {
              return
            } else if (params.seriesType === 'lines') {
              return (
                '<span style="color:#20232A;font-weight:bold;margin-bottom:18px;display:inline-block">线路信息</span>' +
                '<br />' +
                ('<span style="color:#818693;font-size:12px;margin-right:100px;margin-bottom:4px;display:inline-block">线路编号：</span>' +
                  '<span style="color:#20232A;font-size:12px;display:inline-block">' +
                  lineNumber +
                  '</span>') +
                '<br />' +
                ('<span style="color:#818693;font-size:12px;margin-right:100px;margin-bottom:4px;display:inline-block">线路名称：</span>' +
                  '<span style="color:#20232A;font-size:12px">' +
                  lineName +
                  '</span>') +
                '<br />' +
                ('<span style="color:#818693;font-size:12px;margin-right:100px;margin-bottom:4px;display:inline-block">线路类型：</span>' +
                  '<span style="color:#20232A;font-size:12px">' +
                  lineType +
                  '</span>') +
                '<br />' +
                ('<span style="color:#818693;font-size:12px;margin-right:88px;margin-bottom:4px;display:inline-block">起始地机构：</span>' +
                  '<span style="color:#20232A;font-size:12px">' +
                  fromAgency +
                  '</span>') +
                '<br />' +
                ('<span style="color:#818693;font-size:12px;margin-right:88px;margin-bottom:4px;display:inline-block">目的地机构：</span>' +
                  '<span style="color:#20232A;font-size:12px">' +
                  toAgency +
                  '</span>') +
                '<br />' +
                ('<span style="color:#818693;font-size:12px;margin-right:123px;margin-bottom:4px;display:inline-block">距离：</span>' +
                  '<span style="color:#20232A;font-size:12px">' +
                  distance +
                  '</span>') +
                '<br />' +
                ('<span style="color:#818693;font-size:12px;margin-right:100px;margin-bottom:4px;display:inline-block">平均成本：</span>' +
                  '<span style="color:#20232A;font-size:12px">' +
                  cost +
                  '</span>') +
                '<br />' +
                ('<span style="color:#818693;font-size:12px;margin-right:100px;margin-bottom:4px;display:inline-block">预计时间：</span>' +
                  '<span style="color:#20232A;font-size:12px">' +
                  time +
                  '</span>')
              )
            } else {
              return params.name
            }
          }
        },
        geo: {
          silent: true,
          map: 'china',
          label: {
            emphasis: {
              show: true,
              color: '#fff'
            }
          },
          roam: false,
          zoom: 1.25,
          itemStyle: {
            normal: {
              borderColor: '#FDB892',
              borderWidth: 0
            },
            emphasis: {
              areaColor: '#ba586f'
            }
          },
          regions: lineManageRegions
        },
        series: series
      }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col-12{
.el-card{
 box-shadow: none;
 #map{
  width: 100%;
  height: 400px;
}
}
}
.el-col{
  padding: 0 12px;
}
.header{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  p{
  margin:0 0 16px;
  font-size: 16px;
  font-weight: 700;
}
.more{
    font-size: 14px;
    color: #818693;
    cursor: pointer;
}
}
.el-card__body{
  height: 400px;
  .el-table{
    .el-table__body-wrapper{
      height: 300px;
      cursor: pointer;
      transition: all 1s;
    }
  }
}
</style>
<style lang="scss">
.el-card__body{
  .el-table{
    height: 400px;
    .el-table__body-wrapper{
      height: 300px;
      cursor: pointer;
      transition: all 1s;
    }
  }
}
</style>
